<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1','2', '3']" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>终端配置</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="/map">终端地图</el-menu-item>
            <el-menu-item index="/home">摄像头配置</el-menu-item>
          </el-menu-item-group>
          <el-menu-item index="delcam">删除终端</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
          <el-menu-item index="list">摄像头数据</el-menu-item>
          <!-- <el-menu-item index="/statistic_chart">统计图表</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>视频查看</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="liveview">实时浏览</el-menu-item>
            <el-menu-item index="review">录像视频</el-menu-item>
            <el-menu-item index="live">多路播放</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="safe_quit">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{person_name}}</span>
      </el-header>
      <el-main>
        <el-tabs type="border-card" id="eltable" tab-position="right" @tab-click="tabclick">
          <el-tab-pane v-for="(item,index) in terminal_id_dev" :key="index" :label="item.label" :name="item.name">
            <!-- 播放{{terminal_id_dev[index].devId}} -->
            <video class="myvideo" :id="index" muted controls autoplay preload="auto"></video>
            <div class="control">
              <!-- 方向键 -->
              <div class="change_camera_direction">
                <div class="camera_title">摄像头方向控制</div>
                <div class="direction_content">
                  <div class="direction_div top_direction" @click="up">
                    <i class="el-icon-caret-top"></i>
                  </div>
                  <div class="direction_div left_direction" @click="left">
                    <i class="el-icon-caret-left"></i>
                  </div>
                  <div class="direction_div bottom_direction" @click="down">
                    <i class="el-icon-caret-bottom"></i>
                  </div>
                  <div class="direction_div right_direction" @click="right">
                    <i class="el-icon-caret-right"></i>
                  </div>
                </div>
              </div>
              <!-- 开关 -->
              <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" class="elswitch"
                @change="change(index)"></el-switch>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer style="text-align: center; font-size: 10px">
        版权所有 © 雷佳千
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
  import {
    getPTZCmd
  } from '../../static/ptz.js'
  import {
    Webrtc
  } from '../../static/webrtc.js'

  export default {
    name: "liveview",
    editableTabsValue: "2",
    data() {
      return {
        webrtc: "",
        value: false,
        person_name: '',
        active: 0,
        terminal_id: '', //当前配置的id
        terminal_id_dev: [] //数据库中终端信息存储
      }
    },
    methods: {
      tabclick() {
        this.value = false;
        if (this.webrtc) {
          this.webrtc.stop("测试");
        }

      },
      change(index) {
        if (this.value) {
          // var videoip = "localhost:15391";
          var videoip = "http://219.138.126.226:18298";
          this.webrtc = new Webrtc(videoip);
          var devId = this.terminal_id_dev[index].devId;
          var channelNo = this.terminal_id_dev[index].channelNo;
          var channel = this.terminal_id_dev[index].channel;
          this.webrtc.addStream(index, "测试", "", devId, channel, channelNo);
          this.webrtc.invite("测试").then((d) => {
            if (d == 200 || d == 304) {
              this.webrtc.play("测试");
            }
          })
        } else {
          // 关闭
          // console.log("stop-in")
          this.webrtc.stop("测试");
        }
      },

      left() {
        console.log("left")
        let cmd = getPTZCmd({
          type: "left",
          speed: 5,
          index: 0
        });
        console.log(this.webrtc);
        var that = this;
        let url = this.$options.methods.getCmdUrl("测试", cmd, that);
        this.$options.methods.get(url).then(d => {
          console.log(d);
        });
      },

      right() {
        let cmd = getPTZCmd({
          type: "right",
          speed: 5,
          index: 0
        });
        let that = this;
        let url = this.$options.methods.getCmdUrl("测试", cmd, that);
        this.$options.methods.get(url).then(d => {
          console.log(d);
        });
      },

      up() {
        console.log("up")
        let cmd = getPTZCmd({
          type: "up",
          speed: 5,
          index: 0
        });
        let that = this;
        let url = this.$options.methods.getCmdUrl("测试", cmd, that);
        this.$options.methods.get(url).then(d => {
          console.log(d);
        });
      },

      down() {
        console.log("down")
        let cmd = getPTZCmd({
          type: "down",
          speed: 5,
          index: 0
        });
        let that = this;
        let url = this.$options.methods.getCmdUrl("测试", cmd, that);
        this.$options.methods.get(url).then(d => {
          console.log(d);
        });
      },

      stop(that) {
        console.log("stop");
        let cmd = getPTZCmd({
          type: "stop"
        });
        let url = that.$options.methods.getCmdUrl("测试", cmd, that);
        this.$options.methods.get(url).then(d => {
          console.log(d);
        });
      },

      getCmdUrl(name, cmd, that) {
        // console.log(that.person_name)
        // console.log(that.webrtc)
        return "http://219.138.126.226:18298/gb28181/control?id=" + that.webrtc.streams["测试"].devId + "&channel=" + that
          .webrtc
          .streams["测试"].channel + "&ptzcmd=" + cmd;
      },

      // get请求url
      get(url) {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.onload = () => {
            resolve(xhr.status);
          }
          xhr.onerror = () => {
            reject(xhr.status);
          }
          xhr.send();
        }).catch(e => {
          console.log(e);
        })
      }
    },
    beforeCreate() {
      this.$http.get(this.$site + 'api/see_config')
        .then((response) => {
          response = response.body;
          for (var i = 0; i < response.length; i++) {
            var demo = {
              "label": "终端" + response[i].terminal,
              "devId": response[i].devId,
              "channelNo": response[i].channelNo,
              "channel": response[i].channel
            };
            this.terminal_id_dev.push(demo)
          }
        });
    },
    mounted() {
      console.log("liveview渲染完");
      var person_name = sessionStorage.getItem('person_name');
      if (person_name === null) {
        this.$router.push('/')
      } else {
        this.person_name = person_name
      };
      this.editableTabsValue = this.terminal_id_dev.length
      // console.log(this.terminal_id_dev[0])
    }
  }

</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  video {
    width: 683px;
    height: 384px;
    background-color: rgb(207, 57, 57);
  }

  .control {
    float: right;
    /* height: 100%; */
  }

  .change_camera_direction {
    background-color: rgb(255, 255, 255);
    text-align: center;
    /* position: absolute; */
    top: 0%;
    width: 160px;
    height: 160px;
    float: right;
    margin-right: 120px;
    margin-top: 120px;
  }

  .change_camera_direction .camera_title {
    color: rgb(39, 145, 206);
    font-size: 15px;
    margin: 5% auto;
  }

  .direction_content {
    width: 100%;
    height: 70%;
    position: relative;
  }

  .direction_div {
    position: relative;
    width: 30px;
    height: 30px;
  }

  .direction_div img {
    width: 100%;
    height: 100%;
  }

  /*left*/
  .left_direction {
    top: 5%;
    left: 20%;
  }

  /*bottom*/
  .bottom_direction {
    top: 5%;
    left: 40%;
  }

  /*right*/
  .right_direction {
    top: -49%;
    left: 61%;
  }

  /*top*/
  .top_direction {
    top: 2%;
    left: 40%;
  }

  /* el-switch */
  /* .elswitch {
    float: bottom;
  } */

</style>
